﻿@{ ViewBag.Title = "jqGrid in ASP.NET MVC - Searching [Advanced]"; }

<table id="jqgProducts" cellpadding="0" cellspacing="0"></table>
<div id="jqgpProducts" style="text-align:center;"></div>
<div id="dlgSupplier"></div>

@section JavaScript {
    <script id="tmplSupplier" type="text/x-jquery-tmpl">
        ${CompanyName}<br /><br />
        ${Address}<br />
        ${PostalCode}, ${City}<br />
        ${Country}<br /><br />
        ${Phone}<br />
        ${HomePage}
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqgProducts').jqGrid({
                //url from wich data should be requested
                url: '@Url.Action("Products")',
                //type of data
                datatype: 'json',
                //url access method type
                mtype: 'POST',
                //columns names
                colNames: ['ProductID', 'ProductName', 'Supplier', 'Category', 'QuantityPerUnit', 'UnitPrice', 'UnitsInStock'],
                //columns model
                colModel: [
                            { name: 'ProductID', index: 'ProductID', align: 'left', search: true, stype: 'text', searchoptions: { sopt: ['eq', 'ne'] } },
                            { name: 'ProductName', index: 'ProductName', align: 'left', search: true, stype: 'text', searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn','nc']} },
                            { name: 'Supplier', index: 'SupplierID', align: 'left', formatter: supplierFormatter, search: true, stype: 'select', searchoptions: { sopt: ['eq', 'ne'], dataUrl: '@Url.Action("Suppliers")' } },
                            { name: 'Category', index: 'Category', align: 'left', search: true, stype: 'select', searchoptions: { sopt: ['eq', 'ne'], dataUrl: '@Url.Action("Categories")' } },
                            { name: 'QuantityPerUnit', index: 'QuantityPerUnit', align: 'left', search: false },
                            { name: 'UnitPrice', index: 'UnitPrice', align: 'left', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, prefix: '$' }, search: false },
                            { name: 'UnitsInStock', index: 'UnitsInStock', align: 'left', formatter: unitsInStockFormatter, search: false }
                          ],
                //pager for grid
                pager: $('#jqgpProducts'),
                //expect object instead of flat array
                jsonReader: { repeatitems: false, id: 'ProductID' },
                //number of rows per page
                rowNum: 10,
                //initial sorting column
                sortname: 'ProductID',
                //initial sorting direction
                sortorder: 'asc',
                //we want to display total records count
                viewrecords: true,
                //grid height
                height: '100%'
            });
            $('#jqgProducts').jqGrid('navGrid', '#jqgpProducts', { add: false, edit: false, del: false }, { }, { }, { }, {
                multipleSearch: true,
                cloneSearchRowOnAdd: false
            });
            $('#dlgSupplier').dialog({ autoOpen: false, bgiframe: true, resizable: false, title: 'Supplier' });
            $('a[data-supplier-id]').live('click', function (e) {
                if (e.preventDefault)
                    e.preventDefault();
                else
                    e.returnValue = false;

                var dialogPosition = $(this).offset();
                $.post('@Url.Action("Supplier")', { supplierId: $(this).attr('data-supplier-id') }, function(data) {
                    $('#dlgSupplier').empty();
                    $('#tmplSupplier').tmpl(data).appendTo('#dlgSupplier');
                    $('#dlgSupplier').dialog('option', 'position', [dialogPosition.left, dialogPosition.top]);
                    $('#dlgSupplier').dialog('open');
                });
            });
        });

        function unitsInStockFormatter(cellvalue, options, rowObject) {
            var cellValueInt = parseInt(cellvalue);
            if (cellValueInt > 10)
                return "<img src='@Url.Content("~/Content/images/ui-flag_green.png")' alt='" + cellvalue + "' title='" + cellvalue + "' />";
            else if (cellValueInt > 0)
                return "<img src='@Url.Content("~/Content/images/ui-flag_blue.png")' alt='" + cellvalue + "' title='" + cellvalue + "' />";
            else
                return "<img src='@Url.Content("~/Content/images/ui-flag_red.png")' alt='" + cellvalue + "' title='" + cellvalue + "' />";
        };

        function supplierFormatter(cellvalue, options, rowObject) {
            return "<a href='#' data-supplier-id='" + cellvalue.substr(1, cellvalue.indexOf(']') - 1) + "'>" + cellvalue.substr(cellvalue.indexOf(']') + 2) + "</a>";
        };
    </script>
}